
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <view>
      <u-navbar :back-text="navTitle"></u-navbar>
    </view>
    <!-- #endif -->
    <view class="content u-page">
      <!-- 内容区 -->
      <monthSelect ref="monthSelectRef" @change="changeDate" :defaultMonths="months"></monthSelect>
 
      <view class="u-table-wrap">
        <view class="table-unit">单位：万支</view>
        <u-table>
          <u-tr style="width: auto; position: sticky;left: 0;;">
            <u-th>{{months[0]}}-{{ months[1] }}查获我省外流卷烟主要省份</u-th>
          </u-tr>
          <u-tr :style="{'width': column.length <=5 ? 'auto': 'max-content'}">
            <u-th v-for="(item, index) in column" :key="index">{{item.title}}</u-th>
          </u-tr>
          <u-tr  v-if="column.length > 0 && keyList.length > 0" v-for="(item, index) in keyList" :style="{'width': column.length <=5 ? 'auto': 'max-content'}" :key="index">
            <u-td v-for="(c, cIndex) in column" :key="cIndex">
              {{newTableData[item][c['field']] || newTableData[item][c['field']] === 0 ? newTableData[item][c['field']] : '--'}}
            </u-td>
          </u-tr>
        </u-table>
      </view>
    </view>
  </view>
</template>

<script> 
import monthSelect from './components/monthSelect'
import queryService from "@/service/query/query.service.js";
import dayjs from 'dayjs'
export default {
  components: { 
    monthSelect,
  },
  data() {
    const currentDate = dayjs().format('YYYY-MM');
    const year = new Date().getFullYear()
    return {
      months: [`${year}-01`, currentDate],
      tableList: [],
      column: [],
      userInfo: this.$store.state.userInfo,
      newTableData: {},
      keyList: [],
    };
  }, 
  // 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
  mounted() {
    this.getDynamicData(this.months)
  },
  methods: {
    changeDate(value) {
      this.getDynamicData(value)
    },
    getMobileHReportDatas(dates){
      this.$modal.showLoading('加载中...');
      queryService.report.getMobileHReportDatas({
        reportCode: 'CIGA_OUTFLOW_PRODUCT_FlOW_TO_MAJOR_PROVINCES_QUERY',
        reportName: '查获我省外流卷烟主要省份',
        reportParas: {
          startYearMonth: dates[0],
          endYearMonth: dates[1],
          compositionName: "",
          orgLevel: this.userInfo.orgLevel,
        },
      }).then(res => {
        this.$modal.hideLoading();
        this.newTableData = {}
        if (res.success) {
          this.tableList = res.data?.[0]?.commonDetailList || [];
          this.tableList.forEach(item => {
            this.newTableData[item.orgName] = {
              ...this.newTableData[item.orgName],
              orgName: item.orgName,
              [item.colKey]: item.colVal
            }
          })
          this.keyList = Object.keys(this.newTableData)
        } else {
          this.$u.toast(res.msg);
        }
      }).catch(e => {
        this.$modal.hideLoading();
        this.$u.toast('查询失败');
      })
    },
    getDynamicData(dates){
      this.$modal.showLoading('加载中...');
      queryService.report.getDynamicData({
        reportCode: 'CIGA_OUTFLOW_PRODUCT_FlOW_TO_MAJOR_PROVINCES_QUERY',
        reportName: '查获我省外流卷烟主要省份',
        reportParas: {
          startYearMonth: dates[0],
          endYearMonth: dates[1],
          compositionName: "",
          orgLevel: this.userInfo.orgLevel,
        },
      }).then(res => {
        this.$modal.hideLoading();
        if (res.success) {
          this.column = res.data;
          this.getMobileHReportDatas(dates)
        } else {
          this.$u.toast(res.msg);
        }
      }).catch(e => {
        this.$modal.hideLoading();
        this.$u.toast('查询失败');
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.u-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  .table-unit{
    font-size: 24rpx;
    text-align: right;
    margin-top: 20rpx;
  }
  /deep/ .u-table {
    overflow-x: scroll;
    width: 100%;
    .u-tr{
      width: max-content;
      .u-td{
        background-color: #fff;
      }
      .u-th,
      .u-td{
        width: 200rpx;
        position: static;
        z-index: 0;
        flex: auto;
        .u-th{
          &:last-child{
            border-right: 0 !important;
          }
          // border-bottom: 0 !important;
        }
      }
    }
    .u-tr .u-td:first-child,
    .u-tr .u-th:first-child{
      position: sticky;
      left: 0;
      z-index: 1;
    }
  }
}
 

</style>

